<template>
  <div>
    <div class="def_nav">
      <ul>
        <li
          :ref="item"
          v-for="(item, index) in navlist"
          :class="[index==0?'active_nav':'']"
          :key="index"
          @click="move(item)"
        >{{item}}</li>
      </ul>
      <div class="line"></div>
    </div>

    <!-- 缓存所有以nav开头的组件 -->
    <keep-alive :include="/^nav/">
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>

export default {
  name: 'navbar',
  created () {
    this.$router.push({ name: "个性推荐" })
  },
  data () {
    return {
      navlist: ["个性推荐", "歌单", "主播电台", "排行榜", "歌手", "最新音乐"],
      songlist: [],
      current: ''
    }
  },
  methods: {
    move (item) {
      let res = Object.keys(this.$refs)
      res.forEach(el => {
        this.$refs[el][0].className = ""
      })
      this.$refs[item][0].className = "active_nav"
      this.$router.push({ name: item })
    }
  }
}
</script>

<style lang="scss" scoped>
.def_nav {
  width: 100%;
  margin: 0 auto;
  height: 60px;
  user-select: none;
  ul {
    height: 20px;
    padding: 10px;
    list-style: none;
    width: 80%;
    margin: 0 auto;
    li {
      float: left;
      box-sizing: border-box;
      margin: 0px 5px;
      width: 15%;
      height: 30px;
      line-height: 30px;
      font-size: 14px;
      display: block;
      cursor: pointer;
    }
    li:hover {
      color: #c20c0c;
    }
  }
  .line {
    border-top: 1px solid #ddd;
  }
  .active_nav {
    border-bottom: 2px solid #c20c0c;
  }
}
.mypopper {
  margin: 0;
  padding: 0;
  position: absolute;
  right: 130px;
  top: 160px;
  width: 600px;
  height: 500px;
  z-index: 2001;
  overflow: auto;
  &::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
  }
  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    background-color: #ccc;
  }
  &::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #ededed;
    border-radius: 10px;
  }
}
</style>